<template>
  <div class="ratings">
    <div class="ratingsContent">
      <div class="ratingsWrapper">
        <div class="wrapper-left border-1px">
          <h1 class="score">{{seller.score}}</h1>
          <div class="title">综合评分</div>
          <div class="rank">高于周边商家{{seller.rankRate}}%</div>
        </div>
        <div class="wrapper-right">
          <div class="content">
            <div class="base">
              <span class="title">商品评分</span>
              <star :size="36" :score="seller.foodScore"></star>
              <span class="score">{{seller.foodScore}}</span>
            </div>
            <div class="base">
              <span class="title">服务态度</span>
              <star :size="36" :score="seller.serviceScore"></star>
              <span class="score">{{seller.serviceScore}}</span>
            </div>
            <div class="base">
              <span class="title">送达时间</span>
              <span class="time"> {{seller.deliveryTime}}分钟</span>
            </div>
          </div>
        </div>
      </div>
      <split></split>
      <ratingsAll :ratings="ratings"></ratingsAll>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import star from "../../components/star/star"
  import split from "../../components/split/split"
  import ratingsAll from "../../components/ratingsAll/ratingsAll"
  const ERR_OK = 0;
  export default {
    props:{
      seller :{
        type:Object
      },
    },
    data() {
      return{
        ratings:[]
      }
    },
    created() {
      this.$http.get('/api/ratings').then((response) => {
          response = response.body;
          if (response.errno === ERR_OK) {
            this.ratings = response.data;
          }
          })
    },
    components:{
      star,
      split,
      ratingsAll,

    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus">
  @import "../../common/stylus/minix.styl"
  .ratings
    position absolute
    top:174px
    left:0
    width 100%
    overflow hidden
    .ratingsContent
      .ratingsWrapper
        display flex
        padding 18px 0
        .wrapper-left
          flex:0 0 138px
          text-align center
          border-right 1px solid rgba(7,17,27,0.1)
          @media only screen and (max-width : 320px)
            flex:0 0 120px
            width 120px
          .score
            font-size 24px
            color: rgb( 255 ,153,0)
            line-height 28px
            margin-bottom 6px
          .title
            font-size 12px
            color: rgb(7,17,27)
            line-height 12px
            font-weight 600
            margin-bottom 8px
          .rank
            font-size 10px
            color: rgb(7,17,27)
            line-height 10px
        .wrapper-right
          flex 1
          font-size 0
          padding-left 24px
          @media only screen and (max-width : 320px)
            padding-left 6px
          .content
            .base
              margin-bottom 8px
              font-weight 600
              .title
                display inline-block
                vertical-align top
                font-size 12px
                color: rgb( 7,17,27)
                line-height 18px
              .star
                display inline-block
                vertical-align top
                margin-left 12px
              .score
                display inline-block
                vertical-align top
                font-size 12px
                margin-left 12px
                color: rgb(255,153,0)
                line-height 18px
              .time
                display inline-block
                vertical-align top
                font-size 12px
                margin-left 12px
                color: rgb(147,153,159)
                line-height 18px


</style>
